Imagen original de Codrops 

Un menú puede ser tan práctico y versátil como uno quiera que sea o tan llamativo y elegante como nos propongamos. Un menú puede ser el punto fuerte de un blog o tan triste e insignificante que nadie repare en él.

 No hay consejo que valga a la hora de escoger un menú, como ocurre con el diseño siempre digo que eso es a gusto del propio autor.

Si se trata de hacer un menú para otra persona es bueno tener en cuenta el uso que se va a dar a ese menú o la cantidad de enlaces que va a necesitar porque si son muchos quizás sea mejor un menú desplegable. Si el blog es comercial entonces nos podemos permitir un menú dinámico con grandes imágenes y efectos atractivos.

 A la hora de escoger un menú el abanico de posibilidades es muy amplio y por suerte tenemos a mano grandes sitios con tutoriales, mi favorito es Codrops y suyo es el original menú del ejemplo. 

Trabaja con jQuery y tiene la particularidad que al pasar el ratón sobre las pestañas la pantalla se oscurece creando el efecto típico de las ventanas modales. Al mismo tiempo que la ventana se oscurece se despliega un submenú mostrando contenido extra. 

El ancho de este menú es de 560px una medida que se adapta a casi cualquier espacio del blog, si deseamos añadir más pestañas puede hacerse y también personalizar el menú respecto a colores.


¿Seguimos? Para añadir este menú en nuestro blog podemos hacerlo de la siguiente forma: Buscamos ]]></b:skin> y justo antes añadimos los estilos:

.oe_overlay { /* estilos de la ventana */
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
ul.oe_menu {  /* ubicación y ancho del menú */
    clear: both;
    float: left;
    list-style: none outside none;
    margin: 30px 0 0 30px;
    position: relative;
    width: 560px;
}
ul.oe_menu > li {  /* cada pestaña */
    float: left;
    height: 101px;
    padding-bottom: 2px;
    position: relative;
    width: 112px;
}
ul.oe_menu > li > a { /* color pestañas visibles */
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 80px;
    margin: 1px;
    opacity: 0.8;
    padding: 10px;
    text-decoration: none;
    text-shadow: 0 0 1px #000000;
    width: 90px;
    background: #138C95;
}
ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a { /* color pestañas seleccionada  */
    background: none repeat scroll 0 0 #0B585E;
    color: #000;
    opacity: 1;
}
.oe_wrapper ul.hovered > li > a { /* color pestaña en hover */
    background: none repeat scroll 0 0 #2ED8E9;
    text-shadow: 0 0 1px #ccc;
    color: #000;
}
ul.oe_menu div { /* bloque oculto */
    background: none repeat scroll 0 0 #2ED8E9;
    display: none;
    height: 180px;
    left: 1px;
    padding: 30px;
    position: absolute;
    top: 103px;
    width: 498px;
}
ul.oe_menu div ul li a {
    color: #000;
    display: block;
    font-size: 12px;
    margin: 2px;
    padding: 2px 2px 2px 4px;
    text-decoration: none;
}
ul.oe_menu div ul.oe_full {
    width: 100%;
}
ul.oe_menu div ul li a:hover {
    background: none repeat scroll 0 0 #000000;
    color: #FFF;
}
ul.oe_menu li ul {
    float: left;
    list-style: none outside none;
    margin-right: 10px;
    text-align: left;
    width: 150px;
}
li.oe_heading {  /* borde del bloque ocultor */
    border-bottom: 1px solid #000;
    color: #000;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    text-shadow: 0 0 1px #ccc;
}

Estos estilos son los que tiene mi ejemplo, si preferimos los estilos del autor podemos descargarlos de su página.

A continuación lo que haremos será añadir jQuery justo antes de </head> si ya estamos utilizando la librería entonces omitimos este paso.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Seguimos, y copiamos el contenido de este archivo y lo pegamos a continuación de la librería jQury, es decir antes de </head>

Guardamos los cambios y con la plantilla en Diseño añadimos un gadget de HTML, en su interior pegaremos lo siguiente:


<div class="oe_wrapper">
   <div id="oe_overlay" class="oe_overlay"></div>
   <ul id="oe_menu" class="oe_menu">
    <li><a href="">Collections</a>
     <div>
      <ul>
       <li class="oe_heading">Summer 2011</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Special Events</a></li>
       <li><a href="#">Runway Show</a></li>
       <li><a href="#">Overview</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Winter 2010</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">Behind the scenes</a></li>
       <li><a href="#">Interview</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">Download</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Categories</li>
       <li><a href="#">Casual</a></li>
       <li><a href="#">Business</a></li>
       <li><a href="#">Underwear</a></li>
       <li><a href="#">Nature Pure</a></li>
       <li><a href="#">Swimwear</a></li>
       <li><a href="#">Evening</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Projects</a>
     <div style="left:-111px;"><!-- -112px -->
      <ul>
       <li class="oe_heading">Fashion Shows</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Events</li>
       <li><a href="#">Fashion Party 2011</a></li>
       <li><a href="#">Evening specials</a></li>
       <li><a href="#">Fashion Day Milano</a></li>
       <li><a href="#">Model Workshops</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Media</li>
       <li><a href="#">Wallpapers</a></li>
       <li><a href="#">Downloads</a></li>
       <li><a href="#">Images</a></li>
       <li><a href="#">Contest 2011</a></li>
       <li><a href="#">Fashion Mania</a></li>
       <li><a href="#">Green Earth Day</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Fragrances</a>
     <div style="left:-223px;">
      <ul class="oe_full">
       <li class="oe_heading">Fashion Fragrances</li>
       <li><a href="#">Deálure</a></li>
       <li><a href="#">Violet Woman</a></li>
       <li><a href="#">Deep Blue for Men</a></li>
       <li><a href="#">New York, New York</a></li>
       <li><a href="#">Illusion</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Events</a>
     <div style="left:-335px;">
      <ul>
       <li class="oe_heading">Shows 2010</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Shows 2011</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Special Events</li>
       <li><a href="#">Fashion Party 2011</a></li>
       <li><a href="#">Fashion Countdown Party 2010</a></li>
       <li><a href="#">Fashion Day Milano</a></li>
       <li><a href="#">Model Workshops</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Stores</a>
     <div style="left:-447px;">
      <ul>
       <li class="oe_heading">Europe</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Asia</li>
       <li><a href="#">Hong Kong</a></li>
       <li><a href="#">Tokio</a></li>
       <li><a href="#">New Delhi</a></li>
       <li><a href="#">Beijing</a></li>
      </ul>
      <ul>
       <li class="oe_heading">United States</li>
       <li><a href="#">New York</a></li>
       <li><a href="#">Los Angeles</a></li>
       <li><a href="#">Seattle</a></li>
       <li><a href="#">Miami</a></li>
      </ul>
     </div>
    </li>
   </ul>
  </div>


Ahí debemos tener en cuenta que cada almohadilla # debemos sustituirla por en sitio a enlazar y cada texto-enlace debe ser sustituido por el texto a mostrar. 

gaveta

hola gema
tu mapa de contenidos que tanto me gustaba y que copié para hacerme un archivo del blog, veo que tampoco te funciona, lo has quitado o se debe a los cambios de blogger?
Yo tengo el feed cerrado hasta aclararme y claro no me funciona ni los últimos comentarios ni el mapa
has averiguado cómo resolverlo?
qué gadget utilizas para los últimos comentarios?
tienes personalizado el feed?

gracias

perdón por poner aquí las preguntas

Gem@

Gracias gavetita por avisar sobre el mapa de contenidos, no me había dado cuenta y en un principio pensé que sin pretenderlo había eliminado el script con alojamiento externo pero no, simplemente lo he comprobado y arrancó de nuevo :) algo de magia puede ser?

Gem@

Me olvidé decirte que compruebes de nuevo ya que posiblemente fuera algo pasajero, siempre que hay "movida" de cambios en Blogger recomiendo no tocar hasta pasado un tiempo prudencial porque casi siempre las cosas funcionan de nuevo :)

Los últimos comentarios los tengo como explico en %% esta entrada.

No hay que perdonar nada ;)

gaveta

Nada gema, el menú no funciona, solo aparece cuando abro el feed, de momento lo tengo en "ninguno" porque ni poniéndolo en hasta salto de línea me respeta la configuración de mi blog que me gusta como está, además el tema del horario de los comentarios siguen sin arreglarlo :S
el tuyo tampoco va, ahora mismo he ido a verlo y está missing, no sé qué puede fallar porque cuando publico abro el feed para que me actualicen los que me tienen enlazada, esto sigue siendo un desastre, me encanta tu menú, aparte del más chulo que he visto, es muy útil. Ya me cuentas si averiguas qué pasa.
Saludos!

Gem@

El feed que abres y cierras a qué te refieres gaevita? es que a lo mejor no hablamos de lo mismo :S porque para que funcione el menú no tiene nada que ver el feed. Otra cosa es el sistema de mapa de contenidos para eso si que es necesario que tengamos activado el feed.

gaveta

hola gema, perdón que ando liada de trabajo
el feed me refiero a que en configuracio-otros, en el feed pongo ninguno, si lo pongo corto o hasta el salto de línea, me desaparecen los emoticonos y el horario de los comentarios es el de LA, ciudad que me encanta jaja
Lo que hago es que cuando publico una entrada, antes pongo feed corto, y publico la entrada, el menú de contenidos se actualiza y aparece, pero cuando pongo ninguno, desparece. Espero haberme explicado
crohetingclub este es mi blog. Los últimos comentarios lógicamente con el feed cerrado es un gadget que no funciona, por eso te preguntaba si habría otra forma de hacerlo, no sé, personalizando el feed, ni idea la verdad

gracias y perdona por marearte

Gem@

No me mareas lo que ocurre que no sé por qué te ocurre eso, no veo conveniente tener que tocar la configuración cada vez que haces una entrada, yo lo dejaría en completo y listo.
Y por cierto parece que el mio no funciona hoy ua sabes eso de en case de herrero...

gaveta

Eso me gustaría Gema, dejar el feed en completo, pero es que si lo hago me desaparecen los emoticonos y además la hora de los comentarios se vuelve loca, he hecho todo lo que me recomendaban en los foros de blogger y nada. Y te soy sincera me harta que cada vez que blogger hace actualizaciones me deja el blog a la virulé y tengo que retocar todo otra vez.
Gracis de todas formas, eres un cielo!

Gem@

¿Por qué no preguntas a Vagabundia? http://vagabundia.blogspot.com/ el tema de los feed seguro que tiene respuesta para eso.

Responder
Karla Castañeda

Está padre ese menú, no lo había visto, es que tienen tanto material en el sitio que mencionas :D

Saludos Gema, qué la estés pasando lindo con tus muñequitas ;)

Gem@

Es verdad Karla y a mí que me encantan os menús llamativos me vuelven loca probando :)

Un abrazo ;)

Responder
Unknown

Me encanta!!!!!

Gem@

Todo tuyo Amets !!

ritmosymelodiasecuador.blogspot.com

:)

Unknown

Gracias Gem@, pero de momento no voy a utilizarlo, pero traducire al euskera tu articulo y lo publicare, esta genial

Responder
Jose Manuel (EL Gruista)

Hola gema
no se por que no me sale la lista de seguidores en mi blog
o sea que no se ven
utilizo mozila firefox
hay alguna solucion
gracias

Gem@

Hola Jose Manuel yo veo el gadget de seguidores ¿es eso lo que dices que no se ve?

Jose Manuel (EL Gruista)

ya se ve no se por que anteriormente no se veia
muchas Gracias por responder
un abrazo gema

Gem@

Por lo que he leído están teniendo problema los que tienen la nueva interfaz, no sé si será tu caso pero puedes ver que se comenta sobre ese tema en Vagabundia y Ciudad Blogger ;)

Responder
Anónimo

Vaya, pero que menú tan bueno, me han dado tantas ganas de cambiar el que tengo y creo que si lo voy a hacer =)

Gem@

Pues adelante, es un menú muy atractivo y puedes cambiar los colores por otros acordes a tu blog.

Responder
del batitú

Hola Gema, felicidades por el dominio, hace tiempo que no paso por aquí, qué bueno que mantengas tu nombre bloguero.
una pregunta desesperada: Blogger nos impondrá a todos su nueva interfaz ahora nomás en abril??
ay no, no quiero perder mi trabajooooo!!!! hace 4 años que voy despacito y sacando tiempo de donde no hay para ir aprendiendo y haciendo lo que me gusta en él. qué sabés Gema??

Gem@

Gracias del batibú y no te preocupes mujer que aunque nos imponga (y nunca mejor dicho) la nueva interfaz no vamos a perder nada del blog todo queda como estaba y sólo cambiará la forma de ver digamos la parte "interior" del blog :)

del batitú

pero puede quedar como está? no te cambia todo el diseño?

del batitú

:O

Gem@

No cambia el aspecto del blog sino la interfaz es decir el escritorio y nuestro panel de administración, lo ven las visitas queda igual :D
También debo decirte que hay que familiarizarse con el cambio porque es precisamente ahí donde tenemos que manejarnos para actualizar y modificar ciertos aspectos del blog.
Conclusión: Haz siempre copia de tu plantilla o descarga el archivo de la misma y ante cualquier duda primero pregunta como ahora :)

Responder
Aseret-Teresa

Hola Gema; estoy tratando de poner el botón de pinterest al final de los posts y no me sale; no sé si es problema de blogger o mío que soy muy torpe :)
Me he guiado por aquí
http://www.bloggersentral.com/2012/02/add-pinterest-pin-it-button-on-blogger.html y también por este vídeo
http://www.youtube.com/watch?v=v3ofIjByoDk&feature=player_embedded
Parece muy fácil y yo juraría que he seguido bien los pasos. ¿Podrías echarle un vistazo?
Un abrazo

Gem@

Hola Aseret-Teresa ¿cómo estás? espero que bien :)
Hice una entrada hace tiepo sobre la forma de añadir iconos de redes sociales en el post-footer puedes verla %% aquí a lo mejor al estar en español re orientas mejor :)

Aseret-Teresa

Gracias Gema, no había visto esta entrada. Voy a intentarlo a ver que pasa. Un abrazo y a disfrutar de tus nenas.

Responder
Anónimo
Este comentario ha sido eliminado por el autor.
Gem@

Hola María José :) sigo asombrada por si no me fallan las cuentas te iniciaste con el blog a los 10 años así que felicidades :)
Me parece muy bien que te tomes el tiempo necesario para decorar tu blog, y por aquí me tienes para cualquier duda aunque últimamente ando con poco tiempo libre pero siempre procuro responder :)
Sigo con tus otros comentarios...

Responder
Anónimo

ah y el menú lo pongo en un pagina del blog llamada (El blog) el segundo icono de la barra gris que tiene 10 iconos... no se si me explico

Responder
Anónimo

ah si.. hay paginas que no tienen nada recien lo hice ayer...

Responder
Anónimo

perdona por molestarte de nuevo...pero no me funcionó
:(:(
sabes por que pueda ser?

gracias por adelantado

Gem@

Veo el icono que dice "Blog" en tu menú pero no veo añadido el menú hover para saber por qué no te funciona debo verlo porque ahora no veo nada ni sé que menú estás añadiendo ni nada :S

Responder
Unknown

Me gusta muchísimo gema.

Una cosa: en el script vienen tres funciones más ("cufon.registerFont") que, por lo que creo, son fuentes... ¿Sabes si son necesarios?

Gem@

Emilio lamento no ver tu comentario antes, he debido pasarlo por alto en mi bandeja de correo :S
Sobre lo que preguntas la respuesta es no, no es necesario añadir esas funciones. He modificado el archivo de descarga para subsanar el error :)

Unknown

No pasa nada :), no esperaba que fuera con mala intención ;)
Gracias por ser como eres y por compartir todo Gema

Responder
Cami C.

Nesecito ayuda con mi blog! Quiero que sea tan lindo como este pero no se como hacerlo! http://selgomezmexico.blogspot.com.ar/ ese blog tiene imagenes debajo de sus entradas, tiene imagenes que se pasan solas, tiene letras con sombra en las entradas, las imagenes con ese borde hermoso, la galeria, los titulos de las entradas son distintos, y hasta la plantilla es distinta Porfavor ayudame Creo que tu blog es lo mas! Sinceramente ayuda!!! :(

Gem@

Pensaba que te había respondido en otro sitio Cami y te decía que todos esos cambios no tienen una sola explicación por lo tanto creo que lo más prudente es instalar la plantilla usas en un blog de pruebas y paso a paso ir haciendo esos cambios que deseas. Cuando lo tegas me avisas ¿Qué te parece?

Responder
Anónimo
Este comentario ha sido eliminado por el autor.
Gem@

Pues no queda otra que trabajar :S

Responder
Javier Robles Chocano

Hola Gema, he intentado poner el menú en mi blog, siguiendo cada paso (incluso los he revisado varias veces) y me sale bien. Tan solo he modificado el ancho (le he dado más), aunque ni dejándolo tal cual me ha salido bien. Digamos que tan sólo salen los títulos principales, y el efecto hover funciona, pero al posicionar el ratón sobre cada uno de ellos no se despliega nada!! ¿Podrías ayudarme? ni idea de qué he hecho mal.

Gem@

Javier necesito ver tu ejemplo online para saber por qué no funciona :S

Responder
Unknown

Kaixo Gem@ denuevo, estoy trasteando con los estilos del menu y hay una cosilla que no consigo hacer, sabes si hay alguna manera de que el menu seleccionado nos salga de color diferente al resto de menus?

Gem@

Explícate un poco más dices que este menú adopta los colores de otros que tienes añadidos?? eso debe ser porque tienen los mismos estilos habría que cambiarles el nombre.

Unknown

Nop, el otro menu no interfiere para nada. A lo que me refiero es que no consigo que se vean de color diferente la pestaña actica, del resto de las pestañas.

Unknown

En el CSS, es la clase:
ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a{
/*Aquí estilos nuevos*/
}
Si no funciona, es posible que sea por el orden de los estilos. En ese caso es posible que tengas que utilizar !important detrás del valor de la propiedad(ej: color:red!important;).

Unknown

Gracias emilio!!!! Me faltaba la propiedad !important.... Solucionado y en funcionamiento

Gem@

Me alegra que esté solucionado, a lo que tu llamas menú yo llamo pestañas del menú de ahí que pensara que los dos menús tenían el mismo color.

Ultimo Coletazos del Rock

si, me daba cuenta del error, pero no se me ocurria como llamarlo de forma correcta. gracias

Responder
Javier

:O
bastante bueno.. me gusto mucho.. los enlaces son rapidos, eso fue lo que mas me gusto.. =D

Gem@

Me alegra que te guste Javier, gracias por comentar :)

Responder
Daniel

hola, que tal? antes que nada gracias por este aporte.

ahora mi duda, estoy utilizando este ejemplo para crear una web sencilla, mi problema es que al agregar otras secciones dentro de la pagina y querer poner links estos aparecen sin formato (lo cual no me molesta porque he podido resolver ese punto), pero lo que no logro resolver es que pierdo el link, es decir cualquier link que agrego no funciona, no cambia el cursor a pointer y no puedo hacer clic

alguna sugerencia?

muchas gracias desde ya!

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top